var URL1 = window.location.href.split('/views/')[ 1 ].split("/")[ 0 ];
var URL2 = window.location.href.split('/views/')[ 1 ].split("/")[ 1 ];
// header组件
Vue.component('header-component' , {
    data     : function(){
        return {
            info         : "" ,
            tempUrl      : tmpsUrls ,
            loginicon    : tmpsUrls + 'www/static/icons/头像1默认.png' ,
            registericon : tmpsUrls + 'www/static/icons/注册1.png' ,
            collecticon  : tmpsUrls + 'www/static/icons/收藏(1).png' ,
            historyicon  : tmpsUrls + 'www/static/icons/时间1.png' ,
            user_id      : getCookie("user_id") ,
            token        : getCookie("token") ,
            is_hover : false
        };
    } ,
    props    : {
        url    : {} ,
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        }
    } ,
    mounted(){
        if( this.token !== null ){
            var formdata = new FormData();
            formdata.append("user_id" , this.user_id);
            formdata.append("token" , this.token);
            axios.post(sysurl + 'user/info' , formdata).then(res => {
                if( res.data.code === 1 ){
                    this.info = res.data.data;
                    if( res.data.data.avatar != '' ){
                        this.loginicon = weburl + res.data.data.avatar;
                    }
                }else{
                    // layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    methods  : {
        loginOut : function(){
            var formdata = new FormData();
            formdata.append("user_id" , this.user_id);
            formdata.append("token" , this.token);
            layer.confirm("确定退出登录？" , { btn : [ "确定" , "取消" ] } , function(){
                axios.post(sysurl + 'user/logout' , formdata).then(res => {
                    if( res.data.code === 1 ){
                        delCookie("token");
                        delCookie("user_id");
                        window.location.href = tmpsUrls + "www/views/login/login.html";
                    }else{
                        // layer.msg(res.data.msg);
                    }
                } , err => {
                }).catch(( error ) => {
                });
            } , function( index ){
                layer.close(index);
            });
        } ,
        mouseenEvent( type ){
            this.is_hover = type;
        }
    } ,
    template : `<header class="header-top" id="header">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <div class="container top_inner">
                            <div class="navbar-brand inner_le">您好，欢迎访问 <a href="">城乡家园服务网</a>官方主站！</div>
                            <button class="navbar-toggler" type="button"
                                    data-toggle="collapse"
                                    data-target="#navbarColor01"
                                    aria-controls="navbarColor01"
                                    aria-expanded="true"
                                    aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                
<!--                            <div class="navbar-collapse collapse" id="navbarColor01">-->
<!--                                <ul class="navbar-nav ml-auto">-->
<!--                                    <li class="nav-item active">-->
<!--                                        <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>-->
<!--                                    </li>-->
<!--                                    <li class="nav-item">-->
<!--                                        <a class="nav-link" href="station.html">选站</a>-->
<!--                                    </li>-->
<!--                                    <li class="nav-item">-->
<!--                                        <a class="nav-link" href="ask.html">问问</a>-->
<!--                                    </li>-->
<!--                                    <li class="nav-item">-->
<!--                                        <a class="nav-link" href="mine.html">我的</a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
                        </div>
                    </nav>
                </header>`
});
// footer组件
Vue.component('footer-component' , {
    data     : function(){
        return {
            control : URL2 ,
            tabList : [
                { name : "首页" , url : "index.html" , icon : "home-icon" } ,
                { name : "选站" , url : "station.html" , icon : "station-icon" } ,
                { name : "问问" , url : "ask.html" , icon : "problem-icon" } ,
                { name : "我的" , url : "mine.html" , icon : "my-icon" }
            ] ,
            is_hover : false
        };
    } ,
    props    : {
        url    : {} ,
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        }
    } ,
    mounted(){
        console.log(URL1 , URL2);
    } ,
    methods  : {} ,
    template : `<nav id="footer">
                    <a :href="'./' + item.url" :class="{ active : item.url == control }" v-for="(item,index) in tabList">
                        <p><span :class="item.icon"></span></p>
                        <span class="icon-name">{{item.name}}</span>
                    </a>
                </nav>`
});
// footer组件
Vue.component('gotop-component' , {
    data     : function(){
        return {
            control : URL2 ,
            tabList : [
                { name : "首页" , url : "index.html" , icon : "home-icon" } ,
                { name : "选站" , url : "station.html" , icon : "station-icon" } ,
                { name : "问问" , url : "ask.html" , icon : "problem-icon" } ,
                { name : "我的" , url : "mine.html" , icon : "my-icon" }
            ] ,
            is_hover : false
        };
    } ,
    props    : {
        url    : {} ,
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        }
    } ,
    mounted(){
        $(window).scroll(()=>{
            if(this.getScrollTop() >= 100 ){
                $(".suspension").show();
            }else{
                $(".suspension").hide();
            }
        });
    } ,
    methods  : {
        getScrollTop(){
            var scrollTop = 0;
            if( document.documentElement && document.documentElement.scrollTop ){
                scrollTop = document.documentElement.scrollTop;
            }else if( document.body ){
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        },
        toTop(){
            $(window).scrollTop(0);
        }
    } ,
    template : `<div class="suspension">
                    <a class="ball" @click="toTop">
                        <img src="../../static/images/mescroll-totop.png">
                    </a>
                </div>`
});
// 首页顶部大搜索
Vue.component('search-component' , {
    data     : function(){
        return {};
    } ,
    props    : {
        url    : {} ,
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        }
    } ,
    mounted(){
    } ,
    methods  : {} ,
    template : `<div class="nav-top">
                    <div class="nav-le">
                        <img src="../../static/images/logo.png" alt="">
                    </div>
                    <div class="nav-ri">
                        <div class="search-box">
                            <div class="search-input">
                                <img src="../../static/icons/搜索(1).png" alt="">
                                <input type="text" placeholder="成都居住证办理流程">
                                <div class="input-position">
                                    <a>热门搜索：</a>
                                    <a>蓝湖橘郡</a>
                                    <a>尚品C经</a>
                                    <a>英郡icon</a>
                                </div>
                            </div>
                            <div class="search-btn" onclick="javascript:window.location.href='../../views/home/search.html'">搜索</div>
                        </div>
                    </div>
                </div>`
});
// 首页顶部 bannber 带搜索
Vue.component('banner-component' , {
    data     : function(){
        return {
            carousel   : [] ,                             // 首页顶部banner
            search_val : "" ,                              // 站点输入数据
            weburl     : weburl
        };
    } ,
    props    : {
        url    : {} ,
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        }
    } ,
    mounted(){
        this.getBannerList();
    } ,
    methods  : {
        getBannerList(){
            axios.post(sysurl + 'index/bannerAds' , { category_id : 14 }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.carousel = data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        } ,
        // 搜索站点
        search( type ){
            window.location.href = `../../views/home/search.html?keyword=${this.search_val}&type=${type}`;
        }
    } ,
    template : `<div class="carousel-box">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li v-for="(item,index) in carousel" :key="index" data-target="#carouselExampleIndicators" :data-slide-to="index" :class="{'active':index == 0}"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div v-for="(item,index) in carousel" :key="index" class="carousel-item" :class="{ 'active' :index == 0 }">
                                <a :href="item.url" target="view_window">
                                    <img class="d-block w-100" :src="weburl + item.image" alt="First slide">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="box-inner">
                        <div class="large-more">基层管理和便民服务平台</div>
                        <div class="large">社区、小区、院落、村、社、组、基层网站查询</div>
                        <div class="search-box">
                            <div class="search-input">
                                <img src="static/icons/搜索(1).png" alt="">
                                <input type="text" placeholder="请输入基层网站名称、如：xx社区/小区/院落/村/组" v-model="search_val">
                            </div>
                            <div class="search-btn" @click="search('site')">搜索站点</div>
                            <div class="search-btn" @click="search('article')">搜索文章</div>
                        </div>
                        <div class="link-row">我关注的：四川成都高新区红树湾二期 <a href="">(点击进入)</a></div>
                    </div>
                </div>`
});
// banner下 文章导航列表
Vue.component('classify-component' , {
    data     : function(){
        return {
            indexNow : 0 ,                 // 当前页面的选中
            weburl : weburl ,
            count  : 0 ,
            top      : [] ,        // 上半部 数据
            topChild : [] ,        // 上半部 子数据
            bottom   : []         // 下半部 数据
            //bottomChild :   [] ,        // 下半部 子数据
            // url:'http://192.168.0.168'
        };
    } ,
    props    : [ "url" ] ,
    mounted(){
        this.getDetail();
    } ,
    methods  : {
        //切换主站导航
        toggleNavigation( list , id ){
            this.topChild = list;
            this.indexNow = id;
        } ,
        getDetail : function(){
            axios.post(sysurl + 'index/navigation' , { type : 23 }).then(res => {
                if( res.data.code === 1 ){
                    this.top      = res.data.data;
                    this.indexNow = res.data.data[ 0 ].id;
                    this.toggleNavigation(res.data.data[ 0 ].child , res.data.data[ 0 ].id);
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
            axios.post(sysurl + 'index/navigation' , { type : 24 }).then(res => {
                if( res.data.code === 1 ){
                    this.bottom = res.data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="classify-box">
                    <div class="service_box">
                        <ul class="nav nav-tabs" id="serviceTab" role="tablist">
                            <li class="nav-item" v-for="(item,index) in top" @click="toggleNavigation(item.child , item.id)">
                                <a class="nav-link" :class="{ 'active' : item.id == indexNow }">{{item.name}}</a>
                                <span></span>
                            </li>
                        </ul>
                        <div class="tab-content" id="serviceTabContent" v-if="topChild.length">
                            <div class="tab-pane fade show active" id="share" role="tabpanel" aria-labelledby="share-tab">
                                <div class="share-content">
                                    <a :href="item.url" class="share-content-item" v-for="(item,index) in topChild">
                                        <img :src="weburl + item.iconimage" :alt="item.name">{{ item.name }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="message-box">
                        <div class="message-item" v-for="(item,index) in bottom" :key="index">
                            <a>【{{item.name}}】</a>
                            <a :href="v.url" v-for="(v,i) in item.child" :data-id="v.id">{{v.name}}</a>
                        </div>
                    </div>
                </div>`
});
// 家园调查 - 问问 - 城市互动 - 投诉建议 等等 杂七杂八的数据组件
Vue.component('investigation-component' , {
    data     : function(){
        return {
            surveyList : ""               // 调查数据列表
        };
    } ,
    props    : {
        siteid : {
            type : Object ,
            default(){
                return {};
            }
        } ,
        url    : {
            type    : String ,
            default : "./"
        }
    } ,
    mounted(){
        this.getSurveyList();
    } ,
    methods  : {
        // 获取家园调查4条数据
        getSurveyList(){
            axios.post(sysurl + 'index/survey' , { site_id : this.siteid.id || "" }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.surveyList = data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="investigation">
                    <div class="investigation-tab">
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="../../static/icons/问题.png" alt="">卜咚问问</div>
                            <div class="tab-item-text">
                                实时为您解答，卜咚问问您身边的社区管家
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="../../static/icons/互动.png" alt="">城乡互动</div>
                            <div class="tab-item-text">
                                民主，公平，公开，透明化选举信息
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="../../static/icons/调查.png" alt="">家园调查</div>
                            <div class="tab-item-text">
                                实时为您解答，卜咚问问您身边的社区管家
                            </div>
                        </div>
                        <div class="tab-item">
                            <div class="tab-item-header"><img src="../../static/icons/投诉.png" alt="">投诉建议</div>
                            <div class="tab-item-text">
                                有您的参与，平台将更加完善谢谢您的留言
                            </div>
                        </div>
                    </div>
                    <div class="investigation-list">
                        <div class="investigation-comment">
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【焦点】</div>
                                <a class="investigation-comment-item-link" href="#" v-if="surveyList && surveyList.hot"
                                    :data-id="surveyList.hot.id" v-text="surveyList.hot.title"></a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【投票】</div>
                                <a class="investigation-comment-item-link" href="#" v-if="surveyList && surveyList.campaign"
                                       :data-id="surveyList.campaign.id" v-text="surveyList.campaign.title + surveyList.campaign.title"></a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【评议】</div>
                                <a class="investigation-comment-item-link" href="#" v-if="surveyList && surveyList.vote"
                                       :data-id="surveyList.vote.id" v-text="surveyList.vote.title"></a>
                            </div>
                            <div class="investigation-comment-item">
                                <div class="investigation-comment-item-title">【征集】</div>
                                <a class="investigation-comment-item-link" href="#" v-if="surveyList && surveyList.active"
                                       :data-id="surveyList.active.id" v-text="surveyList.active.title"></a>
                            </div>
                        </div>
                    </div>
                </div>`
});
// 家园见闻 法制道德 公益帮助
Vue.component('article-component' , {
    data(){
        return {
            myTabList     : "" ,
            articleList   : "" ,
            nowCategoryId : ""             // 当前分类id
        };
    } ,
    props    : {
        type : {
            type : Object ,
            default(){
                return {
                    id   : 25 ,
                    name : "家园见闻"
                };
            }
        } ,
        url  : {
            type    : String ,
            default : "../../"
        }
    } ,
    mounted(){
        this.getTabList();
    } ,
    methods  : {
        // 获取tab list
        getTabList(){
            axios.post(sysurl + 'index/articleCategory' , { type : this.type.id }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.myTabList     = data.data;
                    this.nowCategoryId = data.data[ 0 ].category_id;
                    this.getArticleList(data.data[ 0 ].category_id);
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        } ,
        // 获取文章列表
        getArticleList( id ){        // type ：文章列表分类   id ：分类id
            this.nowCategoryId = id;
            axios.post(sysurl + 'index/articleList' , { category_id : id , limit : 10 }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.articleList = data.data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="experience-box">
                      <div class="experience-title">
                          <div class="experience-title-text">{{type.name}}</div>
                      </div>
                      <div class="experience-container">
                          <ul class="nav nav-tabs" id="myTab" role="tablist">
                              <li class="nav-item" v-for="(item,index) in myTabList" @click="getArticleList(item.category_id)">
                                  <a class="nav-link" :class="{'active' : index == 0}" :id="'tab' + item.category_id"
                                     data-toggle="tab" role="tab" aria-controls="hotspot" :aria-selected="index == 0">
                                      {{item.name}}
                                  </a>
                              </li>
                          </ul>
                          <div class="tab-content" id="myTabContent">
                              <div class="tab-pane fade show active">
                                  <a class="experience-list" v-for="(item,index) in articleList" :key="index" 
                                    :href="url + 'views/home/article.html?id=' + item.id + '&type='+ ( url == './' ? '' : 'site' ) +'&category_name=家园见闻&category_id=' + nowCategoryId ">
                                      <div class="list-img">
                                          <img :src="item.coverimages_text[0]">
                                      </div>
                                      <div class="list-content" v-html="item.postcontent"></div>
                                  </a>
                              </div>
                          </div>
                      </div>
                  </div>`
});
// 新闻列表
Vue.component('news-component' , {
    data(){
        return {
            articleList : ""               // 调查数据列表
        };
    } ,
    props    : {
        siteid : {
            default(){
                return {};
            }
        } ,
        url    : {
            type    : String ,
            default : "./"
        }
    } ,
    mounted(){
        this.getArticleList();
    } ,
    methods  : {
        // 获取文章列表
        getArticleList(){
            axios.post(sysurl + 'index/articleList' , {
                category_id : 76 ,
                site_id     : this.siteid.id || "" ,
                limit       : 15 ,
                page        : 1
            }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.articleList = data.data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="news" v-if="articleList.length">
                    <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                            <a class="carousel-item active"
                                :href="url + 'views/home/article.html?id=' + item.id + '&type='+ ( url == './' ? '' : 'site' ) + '&category_name=新闻列表&category_id=76'" 
                                :class="{ 'active' : index == 0 }" v-for="(item,index) in articleList" v-if="index < 3">
                                <img class="d-block w-100" :src="item.coverimages_text[0]" :alt="item.title">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>{{item.title}}</h5>
                                </div>
                            </a>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    
                    <div class="news-item" v-if="articleList.length > 3">
                        <a v-for="(item,index) in articleList" v-if="index >= 3"
                            :href="url + 'views/home/article.html?id=' + item.id + '&type='+ ( url == './' ? '' : 'site' ) + '&category_name=新闻列表&category_id=76'">
                            <span class="dot">·</span>
                            <span class="text">{{item.title}}</span>
                        </a>
                    </div>
                </div>`
});
// 投诉平台列表
Vue.component('report-component' , {
    data(){
        return {
            reportList : ""               // 调查数据列表
        };
    } ,
    props    : {
        siteid : {
            default(){
                return {};
            }
        } ,
        url    : {
            type    : String ,
            default : "./"
        }
    } ,
    mounted(){
        this.getReportList();
    } ,
    methods  : {
        // 获取文章列表
        getReportList(){
            axios.post(sysurl + 'index/tipOffWay' , { site_id : this.siteid.id }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.reportList = data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="report" v-if="reportList.length">
                    <a class="report-inner" v-for="(item,index) in reportList" target="_blank" :href="item.url">{{item.name}}</a>
                </div>`
});
// 首页底部广告
Vue.component('banner2-component' , {
    data(){
        return {
            adv2   : [] ,
            weburl : weburl
        };
    } ,
    props    : {
        siteid : {
            default(){
                return {};
            }
        } ,
        url    : {
            type    : String ,
            default : "./"
        }
    } ,
    mounted(){
        this.getBanner();
    } ,
    methods  : {
        // 获取文章列表
        getBanner(){
            axios.post(sysurl + 'index/bannerAds' , { category_id : 41 }).then(res => {
                var data = res.data;
                if( data.code === 1 ){
                    this.adv2 = data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="adv-row" v-if="adv2.length">
                    <a :href="a.url" target="view_window" v-for="(a , index) in adv2" :key="index">
                        <img :src="weburl + a.image" alt="" style="height: 5.75rem">
                    </a>
                </div>`
});
// 友情链接
Vue.component('friend-component' , {
    data     : function(){
        return {
            list   : [] ,
            weburl : weburl
        };
    } ,
    props    : [ "url" ] ,
    mounted(){
        this.getDetail();
    } ,
    methods  : {
        getDetail : function(){
            axios.post(sysurl + 'index/friendsLink' , {}).then(res => {
                if( res.data.code === 1 ){
                    this.list = res.data.data;
                }else{
                    layer.msg(res.data.msg);
                }
            } , err => {}).catch(( error ) => {});
        }
    } ,
    template : `<div class="experience-box" style="border-radius: 0">
                    <div class="experience-title">
                        <div class="experience-title-text">友情链接</div>
                    </div>
                    <div class="experience-container">
                        <a class="experience-container-adv-item" :data-id="item.id" v-for="(item,index) in list" :href="item.url" :title="item.name">
                            <img :src="weburl + item.image" :alt="item.name">
                        </a>
                    </div>
                </div>`
});
// 分页组件
Vue.component('v-pagination' , {
    data     : function(){
        return {
            count   : 0 ,
            current : this.currentPage ,
            isShow  : this.total
        };
    } ,
    props    : {
        total       : {     // 数据总条数
            type    : Number ,
            default : 0
        } ,
        display     : {     // 每页显示条数
            type    : Number ,
            default : 15
        } ,
        currentPage : {     // 当前页码
            type    : Number ,
            default : 1
        } ,
        pagegroup   : {     // 分页条数
            type    : Number ,
            default : 5 ,
            coerce  : function( v ){
                v = v > 0 ? v : 5;
                return v % 2 === 1 ? v : v + 1;
            }
        }
    } ,
    mounted(){
        this.current = this.currentPage;
        //this.$options.methods.pagehide(this);
    } ,
    watch    : {
        currentPage : function(){
            this.current = this.currentPage;
        }
    } ,
    computed : {
        page      : function(){ // 总页数
            return Math.ceil(this.total / this.display);
        } ,
        grouplist : function(){ // 获取分页页码
            var len = this.page , temp = [] , list = [] , count = Math.floor(this.pagegroup / 2) ,
                center                                          = this.current;
            if( len <= this.pagegroup ){
                while( len-- ){
                    temp.push({ text : this.page - len , val : this.page - len });
                }
                ;
                return temp;
            }
            while( len-- ){
                temp.push(this.page - len);
            }
            ;
            var idx = temp.indexOf(center);
            (idx < count) && (center = center + count - idx);
            (this.current > this.page - count) && (center = this.page - count);
            temp = temp.splice(center - count - 1 , this.pagegroup);
            do{
                var t = temp.shift();
                list.push({
                    text : t ,
                    val  : t
                });
            }while( temp.length );
            if( this.page > this.pagegroup ){
                (this.current > count + 1) && list.unshift({ text : '...' , val : list[ 0 ].val - 1 });
                (this.current < this.page - count) && list.push({
                    text : '...' ,
                    val  : list[ list.length - 1 ].val + 1
                });
            }
            return list;
        }
    } ,
    methods  : {
        setCurrent : function( idx ){
            if( this.current != idx && idx > 0 && idx < this.page + 1 ){
                this.current = idx;
                this.$emit('pagechange' , this.current);
            }
        }
    } ,
    template : `<nav v-if="isShow" style="background: transparent;">
                    <div class="pagination">
                        <div class="pagination-inner">
                            <span class="pagination-prep" style="width: 3.88rem" :class="{'disabled': current == 1}" @click="setCurrent(current - 1)"> 上一页 </span>
                            <span class="pagination-prep" style="width: 3.88rem" :class="{'disabled': current == 1}" @click="setCurrent(1)"> 首页 </span>
                            <span class="pagination-num" v-for="p in grouplist" :class="{'active': current == p.val}" @click="setCurrent(p.val)">{{ p.text }}</span>
                            <span class="pagination-next" style="width: 3.88rem" :class="{'disabled': current == page}" @click="setCurrent(page)"> 尾页 </span>
                            <span class="pagination-next" style="width: 3.88rem" :class="{'disabled': current == page}" @click="setCurrent(current + 1)"> 下一页 </span>
                        </div>
                    </div>
                </nav>`
});
